<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>姓名案例_计算属性实现</title>
    <script type="text/javascript" src="../../vue.js/vue.js"></script>
  </head>

  <body>
    <div id="root">
      姓:<input type="text" v-model="firstName" /> <br />
      名:<input type="text" v-model="lastName" /> <br />
      全名:<input type="text" v-model="fullName" /> <br />
      全名:<span>{{fullName}}</span> <br />
    </div>

    <script type="text/javascript">
      Vue.config.productionTip = false;

      const vm = new Vue({
        el: "#root",
        data: {
          firstName: "张",
          lastName: "三",
        },
        computed: {
          fullName: {
            get() {
              console.log("get被调用了");
              //此处的this是vm
              // console.log(this)
              return this.firstName + "-" + this.lastName;
            },
            set(value) {
              console.log("set被调用了", value);
              const arr = value.split("-");
              this.firstName = arr[0];
              this.lastName = arr[1];
            },
          },
        },
      });
    </script>
  </body>
</html>

<!-- 
	计算属性:
			1.定义: 要用的属性不存在,要通过已有属性计算得来.
			2.原理: 底层借助了Object.defineProperty方法提供的getter和setter.
			3.get有什么作用?
				当有人读取fullName时,get就会被调用,且返回值就作为fullName的值.
			4.get函数什么时候执行?
						(1).初次读取时会执行一次.
						(2).当依赖的数据发生改变时会被再次调用.
			5.set什么时候调用? 当fullName被修改时.
			6.优势: 与methods实现相比,内部有缓存机制(复用), 效率更高, 调试方便.
			7.备注:
					1.计算属性最终会出现在vm上,直接读取使用即可.
					2.如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变.
-->
